<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .a,
        .b,
        .c,
        .d {
            border: 1px dashed #333;
            padding: 20px;
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <p ASD="ASD">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <!-- 
            父组件在使用子组件时,可以给子组件传递数据 

            如何传入数据?
                1. 在子组件的标签内作为属性传入  !!!
                2. 在子组件的标签对内作为内容传入
        -->

        <!-- 父组件给子组件传入静态属性 -> 属性值都是字符串 -->
        <comp-a class="one" id="first" title="hello" :count="count" :num="1" :str="'hello'" :bool="true" :arr="[1,2,3]"
            :obj="{a:1,b:2}" :data-id="100" style="font-size:22px;"></comp-a>

        <!-- 父组件给子组件传入动态属性 -> 借助v-bind -> 指令值时javascript表达式
             a. 可以传入各种类型的数据
             b. 子组件接收的数据可以随父组件传入的数据改变而改变 

            注意: 如果父组件给子组件传入的属性时,如果属性名比较复杂建议使用中划线命名法,子组件接收后,默认会将属性名有中划线命名改为驼峰式命名法
        -->
        <comp-b :count="count"></comp-b>
    </div>
</body>
<script>
    // 组件通信之props

    // 父传子
    // props => 通信 (父组件传入数据 , 子组件接收数据)
    // 父组件如何如何传入数据 ?
    //     1. 在子组件的标签内作为属性传入!!!

    // 子组件如何接收数据? 
    // 1. 通过props对应属性名接收数据 
    //  a. 默认会对应属性名存储到组件实例中, -> 组件内可以直接通过this访问(快捷取值)
    //  b. 也会将props接收的所有数据,存储到当前组件实例的$props属性中 (用于存储所有通过props属性接收的数据)

    // attrs  => 父组件传了,但是子组件没有用props接收
    // 1. 如果父组件传入的属性,没有被prop接收, 那么会透过子组件,传递到组件的根元素上 (被根元素继承), => 作为标签内的属性存在(官方的 用户自定义)
    //    a. 如果子组件有同名属性   class和style会拼接, 此外的其他属性会使用传入的更改(传入的覆盖原本的)

    // 2. 


    // 局部组件
    var CompA = {
        data() {
            return {
                count: 10,
            }
        },
        template: `<div class="a" id="one-box" title="你好" num="2" style="color:red">
                <div>我是组件A:{{count}}</div>
            </div>`,
        mounted() {
            console.log("组件实例A", this);
        },
    }

    var CompB = {
        props: ["count"],
        data() {
            return {

            }
        },
        template: `<div class="b">
                <div>我是组件B:{{count}}</div>
            </div>`,
        watch: {
            count: function (newVal, oldVal) {
                console.log("count发生了改变", newVal, oldVal);
            }
        },
        mounted() {
            console.log("组件实例B", this);

        },
    }


    // 根组件
    var app = new Vue({
        el: "#app",
        data: {
            count: 10,
        },
        components: {
            // 对象的键名 -> 被注册的组件名
            // 对象的健值 -> 被注册的组件的options配置
            CompA: CompA,
            CompB: CompB,
        }
    })








</script>

</html>